<template>
  <el-card class="box-card">
    <!-- 上面 -->
    <el-row type="flex">
      <el-col><el-button type="primary" size="small" @click="Add">添加页面</el-button></el-col>
      <el-col :span="10">
        <el-row type="flex">
          <el-col><el-input v-model="search" placeholder="请输入内容" /></el-col>
          <el-col><el-button @click="screen">筛选</el-button></el-col>
        </el-row>
      </el-col>
    </el-row>
    <hr>
    <!-- 下面 -->
    <el-table
      height="350px"
      :data="fromData"
      border
      style="width: 100%"
    >
      <el-table-column
        label="标题"
        align="center"
        prop="title"
      />
      <el-table-column
        prop="content"
        align="center"
        label="内容"
      >
        <template v-slot:default="slot">
          <div v-html="slot.row.content" />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
      >
        <template v-slot="scoped">
          <el-button type="primary" size="small" @click="edit(scoped.row.id)">编辑</el-button>
          <el-button type="danger" size="small" @click="del(scoped.row.id)">删除 </el-button>
        </template>

      </el-table-column>
    </el-table>
    <el-dialog
      :title="list.id?'编辑':'新增'"
      :visible="isShowDialog"
      @close="canCel"
    >
      <el-form ref="From" :model="list" :rules="rules" label-width="60px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="list.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="内容" prop="content">

          <vue-editor v-model="list.content" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button type="primary" @click="btnOk">确认</el-button>
        <el-button @click="canCel">取消</el-button>
      </template>
    </el-dialog>
    <el-row type="flex" justify="center" align="middle" style="height: 60px">
      <el-pagination
        class="paging"
        background
        layout="prev, pager, next,jumper"
        :total="total"
        :page-size="houseList._limit"
        :current-page.sync="one"
        @current-change="PageSwitch"
      />
    </el-row>
  </el-card>
</template>

<script>
import { VueEditor } from 'vue2-editor'
import { pageData, AddPage, delPage, editDetails, edit, PageNum } from '@/api/page'
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      one: 1,
      search: '', // 模糊查询

      id: null,
      houseList: {
        _limit: 5,
        _start: 0,
        title_contains: ''
      }, // 房产列表
      fromData: [], // 渲染列表
      isShowDialog: false,
      list: {
        content: '',
        title: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        content: [
          {
            validator(rule, value, callback) {
              if (value === '<p></p>') {
                callback(new Error('请输入内容'))
              } else {
                callback()
              }
            }
          },
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      },
      editData: {
        id: this.id,
        title: '',
        content: '',
        created_at: new Date(),
        updated_at: new Date()

      }, // 编辑参数
      total: 0, // 总条数total
      Index: 0 // 页码的索引

    }
  },
  created() {
    this.getPageData()
    this.getNum()
  },

  methods: {
    /* 渲染列表 */
    async getPageData() {
      const res = await pageData(this.houseList)
      console.log(178, res)
      this.fromData = res.data
    },
    /* 获取页面数量 */
    async getNum() {
      const res = await PageNum(this.houseList)
      console.log('总条数', res)
      this.total = res.data
    },
    /* 确定打开对话框 */
    Add() {
      this.isShowDialog = true
    },
    /* 确定 */
    async btnOk() {
      /* 校验表单 */
      await this.$refs.From.validate()
      /* 判断有没有id */
      if (this.id) {
        this.editData = {
          id: this.id,
          title: this.list.title,
          content: this.list.content,
          created_at: new Date(),
          updated_at: new Date()
        }
        /* 有就是编辑 发送请求 */
        await edit(this.editData)
        /* 提示用户 */
        this.$message.success('编辑成功')
      } else {
        /* 发送请求 */
        await AddPage(this.list)

        /* 提示用户 */
        this.$message.success('添加成功')
      }
      // console.log(139, quill)
      /* 关闭弹窗提示用户 */
      this.isShowDialog = false
      /* 更新页面 */
      this.getPageData()
      /* 更新数量 */
      this.getNum()
      /* 清空表单 */
      this.list = {
        content: '',
        title: ''
      }
    },
    /* 取消 */
    canCel() {
      this.isShowDialog = false
      this.list = {
        content: '',
        title: ''
      }
    },
    /* 编辑 */
    async edit(id) {
      this.id = id
      // console.log(149, id)
      /* 打开对话框 */
      this.isShowDialog = true
      const res = await editDetails(id)
      // console.log(220, res.data)
      this.list = res.data
    },
    /* 删除 */
    async del(id) {
      try {
        /* 询问客户 */
        await this.$confirm('是否删除')
        /* 发送请求 */
        await delPage(id)
        if (this.Index !== 1 && this.fromData.length === 1) {
          this.Index--
          this.houseList._start = (this.Index - 1) * this.houseList._limit
        }
        /* 更新页面 */
        this.getPageData(this.houseList)
        this.getNum()
      } catch (error) {
        console.log(error)
      }
    },
    /* 筛选 */
    async screen() {
      this.houseList = {
        _limit: 5,
        _start: 0,
        title_contains: this.search
      }
      this.one = 1
      const { data } = await pageData(this.houseList)
      this.fromData = data
      // console.log('筛选列表', this.fromData)
      // console.log('筛选后的列表', this.fromData)
      const result = await PageNum({ title_contains: this.search })
      console.log('筛选数量', result)
      this.total = result.data
    },
    /* 切换页数 */
    PageSwitch(index) {
      this.Index = index
      this.houseList._start = (index - 1) * this.houseList._limit
      this.getPageData(this.houseList)
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card{
  margin-top: 10px;
}

</style>

